<template>
    <div>
        <h2>{{ msg }}</h2>
        <h2>{{ msg.split("").reverse().join("") }}</h2>
        <h2>{{ reMsgF() }}</h2>
        <h2>{{ reMsg }}</h2>
        <input v-model="msg">
    </div>
</template>

<script>
import { ref, computed, watch } from "vue"
export default {
    setup() {
        const msg = ref("Hello Vue");
        console.log(msg)
        //方法
        function reMsgF() {
            console.log("触发reMsg")
            return msg.value.split("").reverse().join("");
        }
        //计算属性
        const reMsg = computed(() => {
            console.log("触发reMsg")
            return msg.value.split("").reverse().join("");
        })
        //侦听器
        watch(msg, (newValue, oldValue) => {
            console.log("旧值是" + oldValue + ",新值是" + newValue)
        })

        return {
            msg,
            reMsgF,
            reMsg
        }

    }
}
</script>

<style></style>